/// 柱状图
import * as echarts from 'echarts';
import { useEffect, useRef } from 'react';
const BarChart = ({ title }) => {
  const echartRef = useRef()
  const iniChart = () => {
    //获取图表dom节点
    // const chartDom = document.getElementById('main');
    const chartDom = echartRef.current
    // 图表初始化
    const myChart = echarts.init(chartDom);

    // 图表参数
    const option = {
      title: {
        text: title
      },
      xAxis: {
        type: 'category',
        data: ['React', 'Vue', 'angular']
      },
      yAxis: {
        type: 'value'
      },
      series: [
        {
          data: [500, 200, 150],
          type: 'bar'
        }
      ]
    };

    option && myChart.setOption(option);
  }
  // 报错dom可用，在进行图表操作
  useEffect(() => {
    iniChart()
  }, [])
  return (
    < div id="main" ref={echartRef} style={{ width: '400px', height: '400px' }}></div >
  )
}
export default BarChart